<template>
    <li class="todo" :class="{ completed: done, editing:edit }">
        <div class="view">
            <input type="checkbox" class="toggle" :checked="done" @change="$emit('update:done', $event.target.checked)" />
            <label>{{ title }}</label>
            <button class="destroy" @click.stop.self="$emit('delete')"></button>
        </div>
        <!-- 输入框 聚焦：focus  失焦：blur-->
        <input type="text" class="edit" :value="title" @blur="$emit('update:edit',false)"
        @keyup.enter="onEdit"
          />
    </li>
</template>

<script setup>
import { defineEmits, defineProps } from 'vue'
const props = defineProps(["title", "done","edit"]);
const emits = defineEmits(["update:done", "delete",'update:edit',  "update:title"]);
function onEdit(e) {
   //失焦
   emits('update:edit',false);
   //修改值 获取输入框的值:
   emits("update:title",e.target.value);
   console.log(e.target.value);
}



</script>